<template>
  <el-dialog
    append-to-body="true"
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="borrower"
      ref="borrowerForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-tabs type="border-card" v-model="activeTabName" ref="tabs">
        <!-- <keep-alive v-if="true"> -->
        <el-tab-pane
          name="q"
          label="照片信息"
          class="integralGrade-info-tab-pane"
        >
          <el-form-item label-width="100px" label="身份证正面">
            <span v-for="item in borrower.borrowerAttaches" :key="item.id">
              <el-image
                v-if="item.imageType == 'idCard1'"
                style="width: 150px"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
          <el-form-item label-width="100px" label="身份证方面">
            <span v-for="item in borrower.borrowerAttaches" :key="item.id">
              <el-image
                v-if="item.imageType == 'idCard2'"
                style="width: 150px"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
          <el-form-item label-width="100px" label="房产信息">
            <el-col :span="8"
              > 
              <span v-for="item in borrower.borrowerAttaches" :key="item.id">
                <el-image
                  v-if="item.imageType == 'house'"
                  style="width: 150px"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                />
              </span>
            </el-col>
          </el-form-item>
          <el-form-item label-width="100px" label="车辆信息">
            <span v-for="item in borrower.borrowerAttaches" :key="item.id">
              <el-image
                v-if="item.imageType == 'car'"
                style="width: 150px"
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-tab-pane>
        <!-- </keep-alive> -->

        <!-- <keep-alive v-if="true"> -->
        <el-tab-pane
          name="borrowedInfoTab"
          label="基本信息"
          class="integralGrade-info-tab-pane"
        >
          <el-form-item label="状态">
            <el-col :span="4">
              <el-tag v-if="borrower.status === 0" type="info" size="mini">
                未认证
              </el-tag>
              <el-tag v-if="borrower.status === 1" type="warning" size="mini">
                认证中
              </el-tag>
              <el-tag v-if="borrower.status === 2" type="success" size="mini">
                认证通过
              </el-tag>
              <el-tag v-if="borrower.status === -1" type="danger" size="mini">
                认证失败
              </el-tag>
            </el-col>
            <el-form-item label-width="100px" label="创建时间">
              <el-col :span="12">{{ borrower.createTime }}</el-col>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="100px" label="姓名">
            <el-col :span="6"> {{ borrower.name }}</el-col>
            <el-col :span="10"
              > 
              <el-form-item label="性别">
                <template slot-scope="scope">
                  {{ borrower.sex === 1 ? "男" : "女" }}
                </template>
              </el-form-item></el-col
            >
          </el-form-item>

          <el-form-item label-width="100px" label="年龄">
            <el-col :span="6"> {{ borrower.age }}</el-col>
            <el-form-item label-width="100px" label="手机">
              <el-col :span="10"> {{ borrower.mobile }}</el-col>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="100px" label="学历">
            <el-col :span="6"> {{ borrower.mobile }}</el-col>
            <el-form-item label-width="100px" label="是否结婚">
              <el-col :span="10"
                > {{ borrower.marry == true ? "是" : "否" }}</el-col
              >
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="100px" label="行业">
            <el-col :span="6"> {{ borrower.industryStr }}</el-col>
            <el-form-item label-width="100px" label="还款来源">
              <el-col :span="10"> {{ borrower.returnSourceStr }}</el-col>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="100px" label="联系人名称">
            <el-col :span="6"> {{ borrower.contactsName }}</el-col>
            <el-form-item label-width="100px" label="联系人手机">
              <el-col :span="10"> {{ borrower.contactsMobile }}</el-col>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="100px" label="联系人关系">
            <el-col :span="8"> {{ borrower.contactsRelationStr }}</el-col>
          </el-form-item>
        </el-tab-pane>
        <!-- </keep-alive> -->
        <!-- <keep-alive v-if=approvalForm.d> -->
        <el-tab-pane name="e" label="审批" class="integralGrade-info-tab-pane">
          <template>
            <el-form-item label="是否通过">
              <el-radio-group v-model="approvalForm.status">
                <el-radio :label="2"> 是 </el-radio>
                <el-radio :label="-1"> 否 </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="基本信息积分" label-width="100px">
              <el-col :span="10">
                <el-input v-model="approvalForm.integral"></el-input>
              </el-col>
              <span style="color: indianred">（可获取30至100积分）</span>
            </el-form-item>
            <el-form-item label="身份证信息是否正确" label-width="140px">
              <el-radio-group v-model="approvalForm.x">
                <el-radio :label="true"> 是 </el-radio>
                <el-radio :label="false"> 否 </el-radio>
              </el-radio-group>
              <span style="color: indisanred">（可获得积分30积分）</span>
            </el-form-item>
            <el-form-item label="房产信息是否正确" label-width="140px">
              <el-radio-group v-model="approvalForm.y">
                <el-radio :label="true"> 是 </el-radio>
                <el-radio :label="false"> 否 </el-radio>
              </el-radio-group>
              <span style="color: indianred">（可获得积分60积分）</span>
            </el-form-item>
            <el-form-item label="车辆信息是否正确" label-width="140px">
              <el-radio-group v-model="approvalForm.z">
                <el-radio :label="true"> 是 </el-radio>
                <el-radio :label="false"> 否 </el-radio>
              </el-radio-group>
              <span style="color: indianred">（可获得积分100积分）</span>
            </el-form-item>
          </template></el-tab-pane
        >
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleDialogClose()">取 消</el-button>
          <el-button type="primary" size="small" @click="submitForm()"
            >确 定</el-button
          >
        </span>
      </el-tabs></el-form
    >
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>


<script>
import { approval } from "@/api/borrower";

const cover = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return (
    [year, month, day].map(formatNumber).join("-") +
    " " +
    [hour, minute, second].map(formatNumber).join(":")
  );
};
const formatNumber = (n) => {
  n = n.toString();
  return n[1] ? n : "0" + n;
};

export default {
  name: "integralGrade-edit",
  data() {
    return {
      approvalForm: {
        d: true,
        //审批表单
        borrowerId: 0,
        status: 0,
        content: "",
        integral: 30,
        x: false,
        y: false,
        z: false,
      },
      param: new URLSearchParams(),
      loading: false,
      borrower: {},
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      activeTabName: "borrowedInfoTab",
    };
  },
  methods: {
    submitForm() {
      if (this.approvalForm.status == 0) {
        this.$message.error("请先审核！");
        return;
      }
      this.approvalForm.borrowerId = this.borrower.id;
      approval(this.approvalForm).then((response) => {
        this.dialogProps.visible = false;
        this.$message.success(response.data.message);
        window.parent.location.reload();
      });
    },
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["borrowerForm"].clearValidate();
      });
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      this.$on("openborrowerDetailDialog", function (borrower) {
        this.approvalForm.d = true;
        this.borrower = borrower;
        this.borrower.createTime = cover(borrower.createTime);
        this.dialogProps.action = "edit";
        this.dialogProps.title = "借款人详情";
        this.activeTabName = "borrowedInfoTab";
        this.dialogProps.visible = true;
      });
      this.$on("openborrowerDialog", function (borrower) {
        this.approvalForm.d = false;
        this.borrower = borrower;
        this.borrower.createTime = cover(borrower.createTime);
        alert(1);
        this.dialogProps.action = "edit";
        this.dialogProps.title = "借款人详情";
        this.activeTabName = "borrowedInfoTab";
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.integralGrade-info-tab-pane {
  margin-top: 10px;
}
</style>





